<!-- 积分余额 -->
<template>
	<view class="page_box">
		<u-cell-item :title="'当前余额:'+userinfo.money" :arrow="false"></u-cell-item>
		<view class="content_box">
			<view class="wrap">
				<view class="tit"> 充值金额 </view>
				<view class="pic-sel-wrap">
					<view class="tm-gview grid-1-3"> 
						<view class="tm-gcell" v-for="(item , idx) in picArray" :key="idx" @click="selChange(idx,item.price,item.status)">
							<!-- <view class="sel-opt" :class="picCur=== idx ? 'on' : ''"> -->
							<view class="sel-opt disabled" v-if="!item.status">
								<view class="price">{{item.price}}元</view>
								<view class="lab">{{item.coin}}元/升</view>
							</view>
							<view class="sel-opt" :class="picCur=== idx ? 'on' : ''" v-else>
								<view class="price">{{item.price}}元</view>
								<view class="lab">{{item.coin}}元/升</view>
							</view>
						</view>
					</view>
				</view>
			</view>

            <view class="wrap" v-if="picTimeNum > 0">
                <view class="tit">按时长充值 :</view>
                <view class="pic-sel-wrap">
                    <view class="tm-gview grid-1-3">
                        <view class="tm-gcell" v-for="(item , idx) in picTimeArray" :key="idx" @click="selTimeChange(idx,item.price,item.status)">
                            <!-- <view class="sel-opt" :class="picTimeCur=== idx ? 'on' : ''"> -->
                            <view class="sel-opt disabled" v-if="!item.status">
                                <view class="price">{{item.price}}元</view>
                                <view class="lab">{{item.coin}}元/天</view>
                            </view>
                            <view class="sel-opt" :class="picTimeCur=== idx ? 'on' : ''" v-else>
                                <view class="price">{{item.price}}元</view>
                                <view class="lab">{{item.coin}}元/天</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

			<view class="wrap">
				<view class="tit">选择支付方式</view>
				<view class="pay-fun-wrap">
					<radio-group name="payFun">
						<view class="tm-view">
							<view class="pay-cell" v-for="(item, idx) in payTypeList" :key="idx" v-if="item.payType != 1" @click="radioChange(item.payType)">
								<view class="pay-item">
									<label class="radio tm-flex">
										<view class="flex-body">
											<view class="tm-ics first">
												<view class="tm-ic">
													<image :src="item.icon" mode="scaleToFill"></image>
												</view>
												<view class="pay-lab">
													<view class="pay-tit">{{item.name}}</view>
												</view>
											</view>
										</view>
										<radio color="#4facfe" :checked="item.value == paytype" />
									</label>
								</view>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			<coco-view-action bgColor="#fc3340" :size="86" :round="10" :between="20" @action="subOrder"></coco-view-action>
		</view>
		
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			picArray: [
			],
            picTimeArray: [
            ],
            picTimeNum: 0,
			picCur: 0,
            picTimeCur: -1,
            priceType: 0,
			moneyText:'支付￥--',
			paytype: 2,
			payTypeList: [
				// {
				// 	value: '3',
				// 	name: '支付宝支付',
				// 	icon: 'https://coco3gcs.oss-cn-qingdao.aliyuncs.com/qm/static/icon/pay-al-ic.png'
				// },
				{
					value: '2',
					name: '微信支付',
					icon: 'https://coco3gcs.oss-cn-qingdao.aliyuncs.com/qm/static/icon/pay-wx-ic.png'
				}
			],
			current: 0,
			price:100,
		};
	},
	computed: {
		...mapState({
			score: state => state.user.userInfo.score,
			userinfo: state => state.user.userInfo
		})
	},
	onLoad() {
		// this.getScoreLog();
		this.getUserInfo();
		this.getPayArr();//按流量充值
        this.getTimePayArr();//按时长充值
	},
	methods: {
		...mapActions(['getUserInfo']),
		selChange(idx,price,status){
            if(status){
                this.picCur = idx;
                this.price = price;
                this.picTimeCur = -1;
                this.priceType = 0;//使用流量方式付费
            }
        },
        selTimeChange(idx,price,status){
            if(status){
                this.picTimeCur = idx;
                this.price = price;
                this.picCur = -1;
                this.priceType = 1;//使用时长方式付费
            }
        },
		getPayArr(){
			this.$get("api/index/get_pay_price?priceType=0").then(res => {
				this.picArray = res.data;
				let useKey = this.picArray.findIndex((item) => item.status == 1);
				this.picCur = useKey;
				this.price = this.picArray[useKey].price;
			})
		},
        getTimePayArr(){
            this.$get("api/index/get_pay_price?priceType=1").then(res => {
                this.picTimeArray = res.data;
                this.picTimeNum = this.picTimeArray.length;
                // let useKey = this.picTimeArray.findIndex((item) => item.status == 1);
                // this.picTimeCur = useKey;
                // this.price = this.picTimeArray[useKey].price;
            })
        },
		// 提交订单
		subOrder() {
		    if(this.price == 0){
				this.$u.toast('金额不合法');
				return false;
			}
			uni.showLoading({
			    title: '正在生成订单'
			});
			this.$post('api/order/add_order', {
				order_type:'r',
                price_type:this.priceType,
                money:this.price,
				memo:'余额充值',
			}).then(res => {
				console.log(res,"orderback");
				if (res.code === 1) {
					this.gotoPay(res.data.ordersn);
				} 
			});
		},
		gotoPay(order_sn){
			let that = this;
			let param = {ordersn:order_sn, paytype:this.paytype};
			this.$post('addons/cocopay/order/submit_order',param).then(res => {
				if(res.code === 1){
					uni.hideLoading();
					console.log(res.data.param,"wxparam");
					uni.requestPayment({
                        provider: 'wxpay',
						orderInfo: res.data.param, //微信订单数据(官方说是string。实测为object)
						success: function(res) {
							that.$u.toast("支付成功");
						},
						fail: function(err) {
							console.log('支付取消或者失败:', err);
							if (err.errMsg !== "requestPayment:fail cancel") {
								that.$u.toast("支付失败");
							}
						}
					});
				}
			})
		}
	}
};
</script>

<style lang="scss">
.tm-flex{
	display: flex;
	align-items: center;
}
.flex-body{
	flex: 1;
	min-width: 0;
}
.scroll-box {
	flex: 1;
	height: 100%;
	padding: 0 30rpx;
}
.tm-ics{
	display: inline-flex;
	align-items: center;
	&.first{
		.tm-ic{
			margin-right: 10rpx;
		}
	}
}
.pay-fun-wrap{
			.pay-cell{
				border-bottom: 1rpx solid #e7e7e7;
			}
			.pay-item{
				height: 103rpx;
				padding: 20rpx;
				.tm-ic{
					width: 48rpx;
					height: 48rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.radio{
					height: 103rpx;
					box-sizing: border-box;
				}
				label{
					margin: -20rpx;
					padding: 20rpx;
				}
				.tm-icon{
					width: 60rpx;
					height: 60rpx;
				}
				.pay-lab{
					margin-left: 20rpx;
				}
				.pay-tit{
					font-size: 28rpx;
					color: #333333;
				}
				.pay-tips{
					font-size: 20rpx;
					color: #999999;
				}
			}
		}
.page_box {
	background: #fff;
	.head_box {
		width: 750rpx;
		height: 480rpx;
		background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 56.99999999999999%, rgba(255, 255, 255, 1) 100%);
		position: relative;
		.bg {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 310rpx;
			height: 310rpx;
		}
		.all-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			// width: 180rpx;
			height: 180rpx;
			.all-num {
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #a8700d;
				margin-bottom: 20rpx;
			}
			.all-title {
				position: absolute;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(168, 112, 13, 1);
				line-height: 54rpx;
				text-align: center;
				width: 154rpx;
				height: 53rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				border-radius: 27rpx;
				bottom: -16rpx;
			}
		}
		.tab-box {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 710rpx;
			height: 90rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx 30rpx 0px 0px;
			border-bottom: 1rpx solid #dfdfdf;
			padding: 0 30rpx;
			.tab-item {
				flex: 1;
				.tab-name {
					font-size: 30rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					border-bottom: 4rpx solid transparent;
					line-height: 86rpx;
				}
				.tab-active {
					border-bottom: 4rpx solid rgba(213, 166, 90, 1);
				}
			}
		}
	}
	.content_box{
		margin: 10rpx;
		.recharge_title{
			padding: 5rpx;
		}
		.wrap{
			background-color: #ffffff;
			margin-top: 10rpx;
			.tit{
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				font-size: 30rpx;
			}
		}
		.tm-gview{
			display: flex;
			flex-flow: row wrap;
			position: relative;
			.tm-gcell{
				width: 33.333%;
			}
		}
		.pic-sel-wrap{
			padding: 20rpx 30rpx;
			.tm-gview{
				margin-top: -36rpx;
				margin-left: -46rpx;
			}
			.tm-gcell{
				padding-left: 46rpx;
				padding-top: 36rpx;
			}
			.sel-opt{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				padding: 20upx;
				 
				border: 1rpx solid #e7e7e7;
				border-radius: 10rpx;
				
				&.on{
					border-color: #4facfe;
					background-color: #eaf4fe;
					.tm-ics{
						.tm-ic-txt{
							color: #4facfe;
						}
					}
					.price{
						color: #4facfe;
					}
					.lab{
						 
						color: #4facfe;
					}
				}
				&.disabled{
					border-color: #999999;
					background-color: #b3b3b3;
					.tm-ics{
						.tm-ic-txt{
							color: #ffffff;
						}
					}
					.price{
						color: #ffffff;
					}
					.lab{
						color: #ffffff;
					}
				}
				.tm-ics{
					.tm-ic{
						width: 40rpx;
						height: 40rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.tm-ic-txt{
						color: #555555;
						font-size: 30rpx;
						font-weight: 600;
					}
				}
				.price{
					color: #333333;
					font-size: 24rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
}
.item-box {
	background: #fff;
	min-height: 150rpx;
	border-bottom: 1rpx solid #dfdfdf;
	padding: 30rpx;
	.name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 28rpx;
		margin-bottom: 20rpx;
	}
	.time {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(196, 196, 196, 1);
		line-height: 24px;
	}
	.num {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #e6b873;
	}
}
</style>
